<template>
  <div>
    <ProductDetail @submit="apply" />
    <van-dialog v-model="showDialog" title="提交信息" :showConfirmButton="false">
      <div class="dialog-container">
        <ul class="form-list">
          <li class="form-option">
            <img src="@assets/images/icon_user.png" alt="" />
            <van-field v-model.trim="userName" maxlength="10" clearable placeholder="请输入您的姓名" />
          </li>
          <li class="form-option">
            <img src="@assets/images/icon_phone.png" alt="" />
            <van-field v-model.trim="telphone" type="tel" maxlength="11" clearable placeholder="请输入您的手机号码" />
          </li>
          <li class="form-option service-type">
            <span>服务类型：</span>
            <van-radio-group v-model="legalServiceType" direction="horizontal" checked-color="#FD9100">
              <van-radio :name="1">工程建设</van-radio>
              <van-radio :name="2">合同劳动</van-radio>
              <van-radio :name="3">交通事故</van-radio>
              <van-radio :name="4">婚姻纠纷</van-radio>
            </van-radio-group>
          </li>
        </ul>
        <p class="tips">温馨提示</p>
        <p class="note">您的信息提交后， 我们的专属顾问会尽快和您联系</p>
        <div class="btn-wrapper">
          <van-button plain hairline type="default" color="#59677F" round @click="toggleDialog">取消</van-button>
          <van-button round color="#FD9100" @click="submit">确认</van-button>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { RadioGroup, Radio, Field, Button, Toast, Dialog } from 'vant';
import ProductDetail from './productDetail';
import { order_saveOrder } from '@api/service';

export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Button.name]: Button,
    [Field.name]: Field,
    ProductDetail
  },
  data() {
    return {
      userName: '',
      telphone: '',
      legalServiceType: 1,
      showDialog: false
    };
  },
  methods: {
    toggleDialog() {
      this.showDialog = !this.showDialog;
    },
    apply() {
      if (!this.$store.state.token) {
        Dialog.confirm({
          title: '您还未实名，是否立即进行实名',
          confirmButtonColor: '#f09637',
          confirmButtonText: '立即实名',
          cancelButtonText: '暂不实名'
        }).then(() => {
          this.$router.openPage('/login');
        });
      } else {
        this.showDialog = true;
      }
    },
    async submit() {
      const { phone, company, nickname } = this.userInfo;
      const { legalServiceType, userName, telphone } = this;
      if (!userName) {
        return Toast('请输入姓名');
      } else if (!/^1[3456789]\d{9}$/.test(telphone)) {
        return Toast('请输入正确的手机号');
      }
      let res = await order_saveOrder({
        json: 1,
        productId: this.$route.query.id,
        phone,
        company,
        nickname,
        status: 1,
        detailList: [
          { itemKey: 'legalServiceType', itemValue: legalServiceType, itemName: '法律服务类型' },
          { itemKey: 'userName', itemValue: userName, itemName: '法律服务申请人姓名' },
          { itemKey: 'telphone', itemValue: telphone, itemName: '法律服务申请人手机号' }
        ]
      });
      if (res.code === 200) {
        Toast('提交成功，稍后我们的专属顾问会及时与您联系');
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      } else {
        Toast(res.msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-container {
  padding: 0 42px 40px;
  line-height: 42px;
  font-size: 28px;
  color: #292f3d;
  ul {
    line-height: 60px;
    margin-bottom: 15px;
  }
  .tips {
    color: #fd9100;
    margin-top: 20px;
  }
  .note {
    color: #666;
  }
  .btn-wrapper {
    display: flex;
    button {
      flex: 1;
      margin: 60px 15px 0;
      height: 80px;
      line-height: 80px;
    }
  }
}
.form-list {
  margin: 30px 0;
}
.form-option {
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 20px 0 40px;
  margin-bottom: 25px;
  font-size: 24px;
  background: #f8f9f9;
  border-radius: 40px;
  &.service-type {
    height: auto;
    background: none;
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    margin-bottom: -20px;
    span {
      flex: 0 0 140px;
      margin: 0 15px 0 30px;
      color: #666;
      font-size: 28px;
    }
    /deep/ .van-radio {
      margin-bottom: 20px;
      font-size: 26px;
    }
  }
  /deep/ input {
    background: #f8f9f9;
  }
  &:after {
    border-radius: 36px;
  }
  img {
    width: 22px;
    margin-right: 20px;
  }
  .van-cell {
    flex: 1;
    padding: 0;
    background: #f8f9f9;
    box-sizing: border-box;
  }
}
</style>
